<template>
  <!-- 滑动开关样式的主题切换器 -->
  <div class="relative">
    <button
      @click="toggleTheme"
      class="relative inline-flex items-center h-6 w-11 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 group"
      :class="themeStore.isDark ? 'bg-indigo-600' : 'bg-gray-300'"
      :title="themeStore.isDark ? '切换到亮色主题' : '切换到暗色主题'"
    >
      <!-- 滑块 -->
      <span
        class="inline-block h-4 w-4 rounded-full bg-white shadow-lg transform transition-all duration-300 flex items-center justify-center"
        :class="themeStore.isDark ? 'translate-x-6' : 'translate-x-1'"
      >
        <!-- 图标 -->
        <div class="relative w-3 h-3 overflow-hidden">
          <!-- 太阳图标 (亮色主题) -->
          <svg
            v-show="!themeStore.isDark"
            class="w-3 h-3 text-yellow-500 transition-all duration-300"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
          </svg>

          <!-- 月亮图标 (暗色主题) -->
          <svg
            v-show="themeStore.isDark"
            class="w-3 h-3 text-indigo-600 transition-all duration-300"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
          </svg>
        </div>
      </span>

      <!-- 背景装饰 -->
      <div class="absolute inset-0 rounded-full opacity-20 transition-opacity duration-300 group-hover:opacity-30"
           :class="themeStore.isDark ? 'bg-white' : 'bg-gray-600'">
      </div>
    </button>

    <!-- 悬停提示 -->
    <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 px-2 py-1 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50"
         :class="[
           themeStore.isDark ? 'bg-gray-800 text-white border-gray-700' : 'bg-white text-gray-900 border-gray-200',
           'border shadow-lg'
         ]">
      {{ themeStore.isDark ? '切换到亮色主题' : '切换到暗色主题' }}
      <!-- 小箭头 -->
      <div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rotate-45"
           :class="themeStore.isDark ? 'bg-gray-800 border-l border-t border-gray-700' : 'bg-white border-l border-t border-gray-200'">
      </div>
    </div>
  </div>
</template>

<script>
import { useThemeStore } from '../stores/theme'

export default {
  name: 'ThemeToggle',
  setup() {
    const themeStore = useThemeStore()
    
    const toggleTheme = () => {
      themeStore.toggleTheme()
    }
    
    return {
      themeStore,
      toggleTheme
    }
  }
}
</script>

<style scoped>
/* 滑动开关动画效果 */
button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active {
  transform: scale(0.98);
}

/* 滑块动画 */
span {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 图标切换动画 */
svg {
  transition: all 0.2s ease-in-out;
}

/* 悬停提示动画 */
.group:hover .group-hover\:opacity-100 {
  animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* 确保在不同主题下的视觉一致性 */
button:focus {
  outline: none;
}

/* 响应式设计 */
@media (max-width: 640px) {
  button {
    height: 1.25rem;
    width: 2.25rem;
  }

  span {
    height: 0.875rem;
    width: 0.875rem;
  }

  svg {
    width: 0.625rem;
    height: 0.625rem;
  }
}
</style>
